<?php
/* @var $this yii\web\View */
use app\models\Mall;
use app\widgets\MallMBottomToolbarWidget;
use yii\helpers\Url;

$web = Url::base();
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>app下载</title>
    <script src="<?= $web ?>/js/mall-m/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="<?= $web ?>/js/apptools.js" type="text/javascript" charset="utf-8"></script>
    <script type="application/javascript">
        $(function() {
            var width = $(document).width();
            if(width > 640) {
                width = 640;
            }
            var fontSize = (width / 320 * 20);
            $('html').css('font-size', fontSize);

            if(isIOS()){
                $('.android-download').hide();
                if(isWeixin()){
                    $('.iphone-download a').attr('href',"javascript:alert('请用浏览器打开此网页!')");
                }
            }else{
                $('.iphone-download').hide();
            }
        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color:transparent;
        }

        a {
            text-decoration: none;
        }

        html {
            font-size: 20px;
            background: #E50038;
        }

        .main {
            width: 16rem;
            margin-right: auto;
            margin-left: auto;
            font-family: "微软雅黑";
            font-size: .6rem;
        }


        .search {
            width: 16rem;
            height: 15.25rem;
            position: relative;
        }

        .search img {
            width: 16rem;
            height: 15.25rem;
        }

        .search .search-btn {
            display: block;
            position: absolute;
            right: .5rem;
            top: 1.25rem;
            width: 2.5rem;
            height: 1.25rem;
            font-size: .45rem;
            color: #9fa0a0;
            font-weight: bold;
            text-align: center;
            line-height: 1.25rem;
            transform: rotate(-27deg);
            -ms-transform: rotate(-27deg);
            -webkit-transform: rotate(-27deg);
        }

        .android-download{
            width: 9.3rem;
            margin: 0 auto;
            margin-top: .75rem;
            margin-bottom: 1rem;
        }
        .android-download .android-btn{
            display: block;
            width: 9.25rem;
            height: 2.4rem;
            border: 1px solid #FFFFFF;
            border-radius: .35rem;
        }
        .android-download .android-btn:active{
            background: #ff003e;
        }
        .android-download .android-btn img{
            float: left;
            width: .875rem;
            height: 1.075rem;
            margin-top: .65rem;
            margin-left: 1.75rem;
        }
        .android-download .android-btn .name{
            font-size: .75rem;
            height: 2.4rem;
            line-height: 2.4rem;
            color: #FFFFFF;
            float: left;
            margin-left: .8rem;
        }

        .iphone-download{
            width: 9.3rem;
            margin: 0 auto;
            /*margin-top: 2.5rem;*/
        }
        .iphone-download .iphone-btn{
            display: block;
            width: 9.25rem;
            height: 2.4rem;
            border: 1px solid #FFFFFF;
            border-radius: .35rem;
        }
        .iphone-download .iphone-btn:active{
            background: #ff003e;
        }
        .iphone-download .iphone-btn img{
            float: left;
            width: .875rem;
            height: 1.075rem;
            margin-top: .65rem;
            margin-left: 1.75rem;
        }
        .iphone-download .iphone-btn .name{
            font-size: .75rem;
            height: 2.4rem;
            line-height: 2.4rem;
            color: #FFFFFF;
            float: left;
            margin-left: .8rem;
        }
        .iphone-download .indicate1{
            font-size: .45rem;
            color: #FFFFFF;
            text-align: center;
            margin-top: 1.25rem;
            margin-bottom: .4rem;
        }
        .iphone-download .indicate2{
            font-size: .45rem;
            color: #333;
            text-align: center;
            margin-bottom: .4rem;
        }
        .iphone-download .indicate3{
            font-size: .45rem;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: .4rem;
        }
    </style>
</head>

<body>
<div class="main">

    <div class="search">
        <img src="<?= $web ?>/images/mall-m/theme-bs/search-browse.jpg" />
        <a class="search-btn">点击这里</a>
    </div>
    <div class="android-download">
        <a href="http://a.app.qq.com/o/simple.jsp?pkgname=android.app.dorabox.com.yumchinaintegral" class="android-btn">
            <img src="<?= $web ?>/images/mall-m/theme-bs/android-logo.png"/>
            <p class="name">Android下载</p>
        </a>
    </div>
    <div class="iphone-download">
        <a href="itms-services://?action=download-manifest&url=https://www.tineasy.com/ep/YumChinaIntegral.plist" class="iphone-btn">
            <img src="<?= $web ?>/images/mall-m/theme-bs/iphone-logo.png"/>
            <p class="name">iphone下载</p>
        </a>
        <p class="indicate1">iphone安装后完成后进入</p>
        <p class="indicate2">设置 — 通用 — 设备管理 — 企业级应用<br /> — 点击信任</p>
        <p class="indicate3">才能正常使用</p>
    </div>
</div>
</body>

</html>